<style lang="scss" scoped>
.container {
  border: 1px solid #00adb5;
  font-size: 50px;
  img {
    border: 1px solid #ddd;
  }
}

.switch-container {
  margin-top: 15px;
}
</style>

<template>
  <div class="vertical-container">
    <div class="container">
      <img src="../../public/images/favicon.png" alt="" :style="{ verticalAlign: top ? 'top' : 'baseline' }" />
    </div>

    <div class="switch-container">
      <el-switch v-model="top" active-text="top" inactive-text="baseline"> </el-switch>
    </div>

    <div class="language-css extra-class">
      <pre class="language-css"><code
           ref="css"></code></pre>
    </div>
  </div>
</template>

<script>
import Prism from "prismjs";

export default {
  name: "clear-white",
  data() {
    return {
      top: false
    };
  },
  watch: {
    top() {
      this.setStyle();
    }
  },
  methods: {
    setStyle() {
      this.$refs["css"].innerHTML = Prism.highlight(
        `vertical-align: ${this.top ? "top" : "baseline"};`,
        Prism.languages.css
      );
    }
  },
  mounted() {
    this.setStyle();
  }
};
</script>
